<template>
	<div>
		<el-dialog title="选择发布的班级" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-select v-model="classid" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
				<el-option v-for="item in options" :key="item.id" :label="item.className" :value="item.id">
				</el-option>
			</el-select>

			<!-- <el-select v-model="classid" placeholder="请选择" style="width: 100%;">
				<el-option v-for="item in options" :key="item.id" :label="item.className" :value="item.id">
				</el-option>
			</el-select> -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="creatCourse()">确 定</el-button>
			</span>
		</el-dialog>

		<div class="main">
			<div style="margin-left: 1.25rem;" @click="$router.push('/CreatTest')">返回</div>
			<div style="font-size: 1.25rem;font-weight: 18.75;">发布考试</div>
			<div style="height: 3.25rem;width: 3.25rem;margin-right: 1.25rem;" @click="$router.push('/ReleaseTest')"></div>
		</div>
		<el-form ref="form" label-width="100px" style="width: 80%;margin-left: 10%;margin-top: 1.25rem;margin-right: 10%;">



			<el-form-item label="开始时间">
				<div class="block">
					<el-date-picker v-model="startTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" :picker-options="pickerOptions0"
					 value-format="yyyy-MM-dd HH:mm:ss" align="right">
					</el-date-picker>
				</div>
			</el-form-item>

			<el-form-item label="截止时间">
				<div class="block">
					<el-date-picker v-model="closeTime" type="datetime" placeholder="选择日期时间" align="right" style="width: 100%;"
					 :picker-options="pickerOptions0" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="最迟进入时间">
				<div class="block">
					<el-date-picker v-model="lastEntryTime" type="datetime" placeholder="选择日期时间" align="right" style="width: 100%;"
					 :picker-options="pickerOptions0" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="最迟提交时间">
				<div class="block">
					<el-date-picker v-model="earliestSubmitTime" type="datetime" placeholder="选择日期时间" align="right" style="width: 100%;"
					 :picker-options="pickerOptions0" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="考试名称">
				<el-input v-model="examName" style="width: 100%;"></el-input>
			</el-form-item>
			<el-form-item label="考试说明">
				<el-input type="textarea" v-model="examExplain" style="width: 100%;" :rows="4"></el-input>
			</el-form-item>
			<el-form-item label="防作弊">
				<el-checkbox-group v-model="entitrick">
					<el-checkbox label="1" name="isOutOfOrder">题目乱序</el-checkbox>
					<div class='section-description'>学生接收到的题目显示顺序不同</div>
					<el-checkbox label="2" name="isOptionsOutOfOrder">选项乱序</el-checkbox>
					<div class='section-description'>学生接收到的题目选项顺序不同</div>
					<el-checkbox label="3" name="isMonitoringOn">考试过程中抓拍监控</el-checkbox>
					<div class='section-description'></div>
					<el-checkbox label="4" name="isScreenSwitchingAllowed">考试过程中切屏监控</el-checkbox>
					<div class='section-description'></div>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="creatExam()">立即创建</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		data() {
			return {
				options: [],
				value1: [],
				value2: [],
				courseID: localStorage.getItem("ClassId"),
				classid: [],
				startdate1: "",
				startdate2: "",
				enddate1: '',
				enddate2: '',
				closeTime: '',
				earliestSubmitTime: '',
				examExplain: '',
				examName: "",
				isMonitoringOn: 0,
				isOptionsOutOfOrder: 0,
				isOutOfOrder: 0,
				isScreenSwitchingAllowed: 0,
				lastEntryTime: "",
				list: '',
				startTime: '',
				testPaperId: localStorage.getItem("TestId"),
				entitrick: [],
				dialogVisible: false,
				examId: '',
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					}
				},

			}
		},
		methods: {
			creatExam() {
				console.log(this.entitrick);
				for (let i = 0; i < this.entitrick.length; i++) {
					if (this.entitrick[i] == 1) {
						this.isOutOfOrder = 1;
					}
					if (this.entitrick[i] == 2) {
						this.isOptionsOutOfOrder = 1;
					}
					if (this.entitrick[i] == 3) {
						this.isMonitoringOn = 1;
					}
					if (this.entitrick[i] == 4) {
						this.isScreenSwitchingAllowed = 1;
					}
				}
				var parmas = {
					closeTime: this.closeTime,
					courseId: this.courseID,
					earliestSubmitTime: this.earliestSubmitTime,
					examExplain: this.examExplain,
					examName: this.examName,
					isMonitoringOn: this.isMonitoringOn,
					isOptionsOutOfOrder: this.isOptionsOutOfOrder,
					isOutOfOrder: this.isOutOfOrder,
					isScreenSwitchingAllowed: this.isScreenSwitchingAllowed,
					lastEntryTime: this.lastEntryTime,
					startTime: this.startTime,
					testPaperId: this.testPaperId,
					examStatus: 0,
				}

				HttpManager.creatExam(parmas).then(e => {
					console.log(e.data.data.id);
					this.examId = e.data.data.id;
					this.dialogVisible = true;
				})
			},
			//获取班级列表
			getClazzByCourseId() {
				var parmas = {
					courseId: this.courseID
				}
				HttpManager.getClazzByCourseId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.options = e.data.data;
				})

			},
			creatCourse() {
				this.dialogVisible = false;
				console.log(this.classid);
				var clazzIds = this.classid;
				HttpManager.addExamToClazz(this.examId, clazzIds).then(e => {
					console.log(e);
					this.$message({
						message: '发布成功',
						type: 'success'
					});
					this.$router.push('/test');
				})

			},
			handleClose() {
				this.dialogVisible = false
			}

		},
		created() {
			this.getClazzByCourseId();
		}
	}
</script>

<style scoped="scoped">
	.section-description {
		font-size: 10px;
		color: #C0C4CC;
		margin-left: 25px;
	}

	.main {
		width: 100%;
		height: 3.25rem;
		line-height: 3.25rem;
		display: flex;
		justify-content: space-between;
		color: white;
		text-align: center;
		cursor: pointer;
		background-color: #03d3bd;
		/* position: fixed; */
		overflow: hidden;
	}
</style>
